<template>
  <div class="wrapper example5-container">
    <!-- 返回区域 -->
    <div
      class="back-box"
      @click="$router.go(-1)"
    >返回</div>

    <!-- 标题区域 -->
    <h1 class="title-box">5、组件传值</h1>

    <!-- 实例区域 -->
    <div class="example5-box">
      <Demo
        msg="你好啊"
        school="湖南城市学院"
        @showSchool="showSchool"
      >
        <!-- <span>哈哈哈哈</span> -->

        <!-- 具名插槽 -->
        <template v-slot:qwe>
          <span>哈哈哈哈</span>
        </template>
      </Demo>
    </div>
  </div>
</template>

<script>
import Demo from '@/components/Demo.vue';

export default {
  name: 'Example5',
  components: {
    Demo
  },
  setup() {
    // 方法
    const showSchool = school => {
      alert(`${school}，这个学校真不错！`);
    };

    return {
      showSchool
    };
  }
};
</script>

<style lang="scss" scoped>
.example5-container {
  // 返回区域
  & > .back-box {
    width: 50px;
    height: 23px;
    line-height: 20px;
    text-align: center;
    background-color: #efefef;
    margin-bottom: 20px;
    font-size: 14px;
    border: 1px solid #767676;
    border-radius: 4px;
    cursor: pointer;
  }

  // 标题区域
  & > .title-box {
    margin-bottom: 30px;
  }
}
</style>
